<template>
    <div class="msg-body"
         :style="randomPosition(random_position)">
        <span class="msg"
              :style="randomColor()"
              v-if="msg==='true'">
            心动的感觉+1
        </span>
    </div>
</template>

<script>
    export default {
        name: "RandomFlyMsg",
        props: {
            random_position: String,
            msg: String
        },
        data() {
            return {}
        },
        methods: {
            randomPosition(random_position = null) {
                if (random_position != null) {
                    let top = Math.ceil(Math.random() * 60) + 25
                    let left = Math.ceil(Math.random() * 60) + 2
                    return {
                        top: top + '%',
                        left: left + '%',
                        fontSize: '18px',
                        fontWeight: 'bold'
                    }
                }
                return {
                    position: "fixed",
                    bottom: '18vh',
                    left: '35%',
                    fontSize: '6vw',
                    fontWeight: 'bold'
                }
            },
            randomColor() {
                let r = Math.floor(Math.random() * 220)
                let g = Math.floor(Math.random() * 220)
                let b = Math.floor(Math.random() * 220)
                let rgba = 'rgba(' + r.toString() + ',' + g.toString() + ',' + b.toString() + ',1)'
                return {
                    color: rgba
                }
            },
        }
    }
</script>

<style lang="stylus">
    .msg-body
        position fixed
        transition all 0.8s
</style>